<template>
  <div>
    <Card>
      <p slot="title">
        中奖名单
      </p>
      <Table ref="tables" :data="tableData" :columns="columns" border disabled-hover/>
      <div class="page-warp">
        <Page
            :current="page.current"
            :page-size="page.size"
            :total="page.total"
            show-total
            @on-change="pageChange"></Page>
      </div>
    </Card>
  </div>
</template>

<script>
import { lucky, luckySave } from '@/api/lottery'
import Icons from '_c/icons'
import base64 from '@/assets/images/base64'

export default {
  name: 'lucky_list',
  components: {
    Icons
  },
  data () {
    return {
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      columns: [
        { type: 'selection', width: 65, align: 'center' },
        {
          title: '头像',
          width: 100,
          key: 'headimgurl',
          align: 'center',
          render: (h, params) => {
            let src = params.row.headimgurl || base64.default_logo
            return h('div', {
              attrs: {
                style: 'width: 40px;height: 40px; margin:auto;'
              }
            }, [
              h('img', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                attrs: {
                  src: src,
                  style: 'width: 40px;height: 40px;border-radius: 2px;'
                },
                style: {
                }
              })
            ])
          }
        },
        { title: '昵称', width: 100, key: 'nickname', align: 'center' },
        { title: '中奖码', width: 100, key: 'code', align: 'center' },
        { title: '联系电话', width: 120, key: 'phone', align: 'center' },
        { title: '联系地址', key: 'address', align: 'center' },
        { title: '备注信息', key: 'remark', align: 'center' },
        {
          title: '状态',
          width: 100,
          key: 'status',
          align: 'center',
          render: (h, params) => {
            let _this = this
            let { status } = params.row
            return h('div', [
              h('Button', {
                props: {
                  type: status === 2 ? 'primary' : 'error',
                  size: 'small'
                },
                on: {
                  click () {
                    let { id, status } = params.row
                    status = status === 2 ? 1 : 2
                    luckySave({ id, status }).then(res => {
                      if (res.code === 1) {
                        _this.getList()
                        _this.$Message.success(res.msg)
                      } else {
                        _this.$Message.error(res.msg)
                      }
                    })
                  }
                }
              }, status === 2 ? '已发货' : '未发货')
            ])
          }
        }
      ],
      tableData: []
    }
  },
  methods: {
    pageChange (page) {
      this.page.current = page
      this.getList()
    },
    getList () {
      let lid = this.$route.query.id || 0
      let { current: page, size } = this.page
      lucky({ lid, page, size }).then(res => {
        if (res.code === 1) {
          this.tableData = res.data.list
          this.page.total = res.data.count
        }
      })
    }
  },
  activated () {
    this.getList()
  },
  created () {
    this.getList()
  }
}
</script>

<style>
.ivu-card-head p{
  height: 32px;
  line-height: 32px;
}
</style>
